<template>
    <div class="overflow-scroll max-h-500px">
        <div v-if="order && model === 'order'">
            <n-card class="mt-16px">
                <template #header>
                    <span class="font-bold font-size-20px"> 订单信息 </span>
                </template>
                <n-grid cols="500:1 600:2" :x-gap="10">
                    <n-gi>
                        <n-list hoverable bordered>
                            <n-list-item>
                                <n-thing
                                    title="订单号"
                                    :title-extra="order.id"
                                />
                            </n-list-item>
                            <n-list-item>
                                <n-thing
                                    title="创建时间"
                                    :title-extra="
                                        new Date(
                                            order.createdTime
                                        ).toLocaleString()
                                    "
                                />
                            </n-list-item>
                        </n-list>
                    </n-gi>
                    <n-gi>
                        <n-list hoverable bordered>
                            <n-list-item>
                                <n-thing title="订单金额">
                                    <template #header-extra>
                                        <n-tag size="small" type="primary">
                                            {{ order.amount }}￥
                                        </n-tag>
                                    </template>
                                </n-thing>
                            </n-list-item>
                            <n-list-item>
                                <n-thing
                                    title="付款时间"
                                    :title-extra="new Date(order.paymentTime!).toLocaleString()"
                                />
                            </n-list-item>
                        </n-list>
                    </n-gi>
                </n-grid>
            </n-card>
            <!-- Requirement列表 -->
            <n-card class="mt-16px">
                <template #header>
                    <span class="font-bold font-size-20px"> 预约需求 </span>
                </template>
                <n-grid cols="500:1 600:2" :x-gap="10">
                    <n-gi>
                        <n-list hoverable bordered>
                            <n-list-item>
                                <n-thing
                                    title="预约日期"
                                    :title-extra="new Date(order.requirement.reserveDate!).toLocaleDateString()"
                                />
                            </n-list-item>
                            <n-list-item>
                                <n-thing
                                    title="会议室面积"
                                    :title-extra="
                                        order.requirement.area === 0
                                            ? '无要求'
                                            : `${order.requirement.area}㎡`
                                    "
                                />
                            </n-list-item>
                            <n-list-item>
                                <n-thing title="会议室类型">
                                    <template #header-extra>
                                        <span v-if="!order.requirement.roomType"
                                            >无要求</span
                                        >
                                        <n-tag v-else size="small">
                                            {{
                                                roomTypeLabel[
                                                    order.requirement.roomType
                                                ]
                                            }}
                                        </n-tag>
                                    </template>
                                </n-thing>
                            </n-list-item>
                        </n-list>
                    </n-gi>
                    <!--  -->
                    <n-gi>
                        <n-list hoverable bordered>
                            <n-list-item>
                                <n-thing
                                    title="预约时间"
                                    :title-extra="`${order.requirement.startTime}:00-${order.requirement.endTime}:00`"
                                />
                            </n-list-item>
                            <n-list-item>
                                <n-thing
                                    title="会议室座位数"
                                    :title-extra="
                                        order.requirement.capacity === 0
                                            ? '无要求'
                                            : `${order.requirement.capacity}人`
                                    "
                                />
                            </n-list-item>
                            <n-list-item>
                                <n-thing title="设备">
                                    <template #header-extra>
                                        <template
                                            v-for="(key, value, index) in order
                                                .requirement.device"
                                            :key="index"
                                        >
                                            <n-tag
                                                v-if="key"
                                                size="small"
                                                class="ml-4px"
                                            >
                                                {{ device[value].label }}
                                                <template #icon>
                                                    <n-icon
                                                        :component="
                                                            device[value].icon
                                                        "
                                                    />
                                                </template>
                                            </n-tag>
                                        </template>
                                    </template>
                                </n-thing>
                            </n-list-item>
                        </n-list>
                    </n-gi>
                </n-grid>
            </n-card>
        </div>
        <n-card v-if="room && model === 'room'" class="mt-16px">
            <template #header>
                <span class="font-bold font-size-20px"> 会议室信息 </span>
            </template>
            <n-grid cols="500:1 600:2" :x-gap="10">
                <n-gi>
                    <n-list hoverable bordered>
                        <n-list-item>
                            <n-thing
                                title="会议室名称"
                                :title-extra="room.name"
                            />
                        </n-list-item>
                        <n-list-item>
                            <n-thing
                                title="会议室面积"
                                :title-extra="`${room.area}㎡`"
                            />
                        </n-list-item>
                        <n-list-item>
                            <n-thing
                                title="会议室座位数"
                                :title-extra="`${room.capacity}位`"
                            />
                        </n-list-item>
                    </n-list>
                </n-gi>
                <n-gi>
                    <n-list hoverable bordered>
                        <n-list-item>
                            <n-thing title="设备">
                                <template #header-extra>
                                    <template
                                        v-for="(
                                            key, value, index
                                        ) in room.device"
                                        :key="index"
                                    >
                                        <n-tag
                                            v-if="key"
                                            size="small"
                                            class="ml-4px"
                                        >
                                            {{ device[value].label }}
                                            <template #icon>
                                                <n-icon
                                                    :component="
                                                        device[value].icon
                                                    "
                                                />
                                            </template>
                                        </n-tag>
                                    </template>
                                </template>
                            </n-thing>
                        </n-list-item>
                        <n-list-item>
                            <n-thing title="会议室类型">
                                <template #header-extra>
                                    <n-tag size="small">
                                        {{ roomTypeLabel[room.type] }}
                                    </n-tag>
                                </template>
                            </n-thing>
                        </n-list-item>
                        <n-list-item>
                            <n-thing
                                title="每小时租金"
                                :title-extra="`${room.hourlyRate}￥`"
                            />
                        </n-list-item>
                    </n-list>
                </n-gi>
            </n-grid>
        </n-card>
    </div>
</template>

<script lang="ts" setup>
import { Mic, Cellular, Tv } from "@vicons/ionicons5";
import type { MeetingRoom } from "@/service/api/types/room";
import type { Order } from "@/service/api/types/reservation";
import type { Component } from "vue";

defineProps<{
    order?: Order | null;
    room?: MeetingRoom | null;
    model: "order" | "room";
}>();

const roomTypeLabel: { [key: string]: string } = {
    classroom: "教室型",
    roundtable: "圆桌型",
};

const device: { [key: string]: { label: string; icon: Component } } = {
    projector: {
        label: "投影仪",
        icon: Tv,
    },
    speaker: {
        label: "扬声器",
        icon: Mic,
    },
    internet: {
        label: "互联网",
        icon: Cellular,
    },
};
</script>

<style scoped></style>
